<template>
  <div>
    <transition name="slide-fade">
      <slot name="fade"></slot>
    </transition>
    <transition>
      <slot></slot>
    </transition>
    <transition name="fade">
    </transition>
  </div>
</template>

<script>
export default {
  name: 'FadeAnimation'
}
</script>

<style lang="stylus" scoped>
  // slide-fade
  .slide-fade{
    position: absolute;left:0;right: 0;
  }
  .slide-fade-enter, .slide-fade-leave-to {
    left:0;right: 0;
    transform: translateY(8px);
    opacity: 0;
  }
  .slide-fade-enter-active {
    transition: all 1.8s ease;
  }
  .slide-fade-leave-active {
    transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0)
  }

  // slide-fade-1
  .v-enter{ // 定义进入过渡的开始状态。
    transform:translateY(500px);
  }
   .v-enter-active{ // 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，
    transition: transform .5s;
  }
  .v-leave-active{ //定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效
    transition: transform .5s;
  }
  .v-enter, .v-leave-to{ //定义离开过渡的结束状态。
    transform:translateY(500px);
  }
  // slide-fade-2
  fade-enter, fade-leave-to
    opacity: 0
  fade-enter-active, fade-leave-active
    transition: opacity .5s

</style>
